<html>

<head>
    <meta charset="utf-8">
</head>
<style>
    .pargraph {
        text-indent: 2em;
    }
</style>
<script src="js/vue-2.6.12.js"></script>

<body>
    <div>
        <input type="button" value="第一题" onclick="window.open('questionOne.html')">
        <input type="button" value="第二题" onclick="window.open('questionTwo.html')">
    </div>
    <hr>
    <p class="pargraph">
        使用Vue完成简易购物车案例
    </p>
    <img src="img/购物车示意图.png">
    <p class="pargraph">题目要求: </p>
    <p class="pargraph">1.作出如图的展示效果</p>
    <p class="pargraph">2.点击购买加号则数量增加,总价格随之更变 </p>
    <p class="pargraph">3.如果书本数量为1则不能减少</p>
    <p class="pargraph">4.点击移除,删除该行,总价格随之更变</p>
    <p class="pargraph"> 5.使用VUE + HMLT 实现该案例</p>
    <hr>
    <b>解答</b>
    <div id="app">
        <table width="50%" cellspacing="0" border="1px" align="center">
            <tr align="center">
                <td></td>
                <td>书籍名称</td>
                <td>出版日期</td>
                <td>价格</td>
                <td>购买数量</td>
                <td>操作</td>
            </tr>
            <tr v-for="(element,index) in goods" align="center">
                <td>{{index +1}}</td>
                <td>{{element.name}}</td>
                <td>{{element.publishTime}}</td>
                <td>{{element.price}}</td>
                <td><input type="button" :disabled="element.count <=1" value="-"
                        @click="reduce(index)">{{element.count}}<input type="button" value="+" @click="add(index)"></td>
                <td><input type="button" value="移除" @click="deleteItem(index)"></td>
            </tr>
        </table>
        <b>总价格：{{total}}</b>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            goods: [
                {
                    name: "《java编程思想》",
                    publishTime: "2020-9",
                    price: 98.00,
                    count: 1
                }, {
                    name: "《数据分析与数据原理》",
                    publishTime: "2019-2",
                    price: 39.00,
                    count: 1
                }, {
                    name: "《代码大全》",
                    publishTime: "2018-8",
                    price: 128.00,
                    count: 1
                }, {
                    name: "《Hadoop权威指南》",
                    publishTime: "2019-10",
                    price: 59.90,
                    count: 1
                }
            ],
            total: 0
        },
        methods: {
            reduce: function (index) {
                this.goods[index].count -= 1;
                this.total = 0;
                var list = this.goods;
                for (var i = 0; i < list.length; i++) {
                    this.total += list[i].price * list[i].count;
                }
                //console.log(index);
            },
            add: function (index) {
                this.goods[index].count += 1;
                this.total = 0;
                var list = this.goods;
                for (var i = 0; i < list.length; i++) {
                    this.total += list[i].price * list[i].count;
                }
                //console.log(index);
            },
            deleteItem: function (index) {
                this.goods.splice(index, 1);
                this.total = 0;
                var list = this.goods;
                for (var i = 0; i < list.length; i++) {
                    this.total += list[i].price * list[i].count;
                }
                //console.log(index);
            },
        },
        created() {
            this.total = 0;
            var list = this.goods;
            for (var i = 0; i < list.length; i++) {
                this.total += list[i].price * list[i].count;
            }
        }
    });
</script>

</html>